<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            box-sizing: border-box;
            margin: 0%;
            padding: 0%;
        }

        html,body{
            height: 1000%;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        #main01{
            height: 820px;
            width: 820px;
            margin-top: 30px;
            border: 2px solid black;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* <!-- flex-wrap控制是否换行（强制），防止子元素被压缩 --> */
            flex-wrap: wrap;
            /* align-content用于定义多行的交叉轴上的对齐方式，当且仅当“flex-wrap”生效的时生效 */
            align-content: space-between;
        }

        .smallBox01{
            /* flex: 1;表示剩余空间占1份，并且可以伸缩盒子的大小数字表示---“剩余空间”---所占份数(即为将父盒子均分多少份)，为正整数 */
                /* flex优先级高于height和width */
                /* flex的基本构成：flex-grow（定义元素剩余空间分配放大比例）+flex-shrink（定义元素剩余空间分配缩小比例）+flex-basis（定义元素在主轴方向上的初始大小） */
                    /* 即为flex: 1;（flex: 1 1 0%;） */
            flex: 1;
            height: 400px;
            width: 200px;
            background-color: black;
        }

        .smallBox01:nth-child(odd){
            background-color: gray;
        }
    </style>
    <!-- “flex弹性布局方式”是目前最主流的布局，可以快速实现元素的对齐、分布和空间分配 -->
    <!-- flex用于设置子盒子的属性（尺寸、顺序或者对齐方式） -->
    <title>弹性布局(伸缩布局)flex的父子属性</title>
</head>
<body>
    <main id="main01">
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
        <div class="smallBox01"></div>
    </main>
</body>
</html>